<template>
  <div class="card-body">
    <div class="flex mb-[8px]">
      <div class="flex-1">
        <slot name="header"></slot>
      </div>
      <el-button
        type="primary"
        :disabled="disabled"
        v-if="!disabled"
        @click="addRecommend"
        ><svg-icon icon-class="add" />新增</el-button
      >
      <slot name="handle"></slot>
    </div>
    <el-table border height="300" :data="listData" :row-class-name="rowClassName">
      <el-table-column prop="supplier_name" label="是否默认" width="110">
        <template #default="{ row, $index }">
          <el-radio v-model="row.is_default" :label="1" name="1" size="large" disabled
            >是否默认</el-radio
          >
        </template>
      </el-table-column>
      <el-table-column prop="platform_name" label="平台" width="120">
        <template #default="{ row }">
          {{ row.platform_name }}-{{ row.site_code }}
        </template>
      </el-table-column>
      <el-table-column prop="sales_price" label="推荐销售价" width="120">
        <template #default="{ row }">
          {{ row.sales_price }} {{ row.currency_name }}
        </template>
      </el-table-column>
      <el-table-column prop="header_channel_name" label="推荐头程渠道" width="200">
        <template #default="{ row }">
          <div>运输方式：{{ row.header_channel_name }}</div>
          <div>渠道：{{ row.header_logistic_channel }}</div>
          <div>预估运费：{{ row.header_freight }}</div>
          <div>时效（天）：{{ row.header_time }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="tail_shipping_type" label="推荐尾程渠道" width="200">
        <template #default="{ row }">
          <div>运输方式：{{ row.tail_shipping_type }}</div>
          <div>渠道：{{ row.tail_logistic_channel }}</div>
          <div>预估运费：{{ row.tail_freight }}</div>
          <div>时效（天）：{{ row.tail_time }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="operation_user_ids_text" label="运营人员" />
      <el-table-column prop="competitor_link" label="竞品链接">
        <template #default="{ row }">
          <el-tooltip
            class="item"
            effect="dark"
            :content="row.competitor_link"
            placement="top"
          >
            <VText
              type="button"
              :line="3"
              :value="row.competitor_link"
              :copy="true"
              @click="openLink(row.competitor_link)"
            ></VText>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注">
        <template #default="{ row }">
          <el-tooltip class="item" effect="dark" :content="row.remark" placement="top">
            <VText :line="1" :value="row.remark"></VText>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        fixed="right"
        width="120"
        show-overflow
        v-if="!disabled"
      >
        <template #default="{ row, $index }">
          <el-button link type="primary" @click="handleOpen(row, $index)">编辑</el-button>
          <el-button link type="danger" @click="handleDel($index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <recommendForm
      ref="recommendRef"
      :listData="listData"
      :info="info"
      @updateForm="updateForm"
    ></recommendForm>
  </div>
</template>

<script setup lang="jsx" name="Sample">
import recommendForm from "./Form.vue";
let handleType = reactive(inject("handleType"));

const props = defineProps({
  modelValue: {
    type: [Array, String],
    default: () => {
      return [];
    },
  },
  info: {
    type: Object,
    default: () => {
      return "";
    },
  },
});

const { info } = toRefs(props);

const disabled = computed(() => {
  return (
    handleType.value == "view" ||
    (handleType.value == "edit" &&
      !(window.BTN_AUTH || []).includes("/goods/task/product/platform-site-info"))
  );
});

const listData = computed({
  get: () => props.modelValue || [],
  set: (val) => {
    emit("update:modelValue", val);
  },
});

const recommendRef = ref();
const currentIndex = ref("");
const handleOpen = (row, rowIndex) => {
  nextTick(() => {
    currentIndex.value = rowIndex;
    recommendRef.value.open("edit", row);
  });
};
const updateForm = (row) => {
  nextTick(() => {
    if (currentIndex.value !== "") {
      listData.value.splice(currentIndex.value, 1, row);
    } else {
      listData.value.push({ ...row });
    }
  });
};
const rowClassName = ({ row }) => {
  if (row.delete === 1) {
    return "hidden-row";
  }
  return "";
};
const handleDel = (index) => {
  if (
    handleType.value == "add" ||
    handleType.value == "copy" ||
    handleType.value == "createSKU"
  ) {
    listData.value.splice(index, 1);
  } else {
    listData.value[index].delete = 1;
  }
};

const addRecommend = () => {
  nextTick(() => {
    currentIndex.value = "";
    recommendRef.value.open("add");
  });
};
</script>

<style lang="scss" scoped>
:deep(.el-table__header) {
  .el-table__cell {
    font-weight: 400 !important;
  }
}
</style>
